<template>
  <!--卡片形式维护 meta-->
  <el-row :gutter="20">
    <el-col :span="12">
      UI库：<br>
      <el-input
        v-model="model.test"
        v-bind="textProps"
      ></el-input><br>
      二次封装：<br>
      <component
        :is="formItemKey[textProps.formItemMeta.controlType]"
        :model="model"
        :partMeta="partProps"
        v-bind="textProps"
      >
      </component><br><br>
      <el-input
        type="textarea"
        :rows="10"
        v-model="strMeta"
      />
      <br>
      <el-button type="" @click="setMeta">设置属性</el-button>
    </el-col>
    <el-col :span="12">
      <el-input
        type="textarea"
        :rows="20"
        v-model="json"
      />
    </el-col>
  </el-row><br>
  <hr>
  <!--卡片-->
  <help-item-card :itemMeta="textProps" ref="refItem"/>

</template>

<script lang="ts">
  import { defineComponent, reactive, computed, ref  } from 'vue'
  import { ElInput, ElRow, ElCol } from 'element-plus'
  import { formItemKey } from '@naturefw/ui-elp'

  import { helpItemCard } from '../../../lib/main'

  export default defineComponent({
    name: 'nf-help-meta-item-card',
    components: {
      helpItemCard,
      ElInput, ElRow, ElCol
    },
    props: {
      meta: [Object]
    },
    setup(props, context) {

      const model = reactive({
        test: ''
      })

      const partProps = reactive({})

      
      // 设置控件的meta
      const textProps = reactive({
        formItemMeta: {
          colName: 'test',
          kind: 20,
          controlType: 121
        },
        format: "YYYY-MM"
      })

      const json = computed(() => JSON.stringify(textProps, null , 2) )

      const refItem = ref(null)
      const strMeta = ref('')

      const setMeta = () => {
        // console.log('eee', refItem.value)
        try {
          const obj = JSON.parse(strMeta.value)
          // 设置需要维护的属性
          refItem.value.setMeta(obj)
        } catch (error) {
          console.log('格式不正确')
        }
      
      }

      return {
        refItem,
        setMeta,
        strMeta,
        json,
        textProps,
        formItemKey,
        partProps,
        model
      }
    }
  })
</script>